<template>
  <div class="app-container">
    <el-form :inline="true" :model="form" class="demo-form-inline filter-container">
      <el-form-item prop="time" label="添加时间">
        <el-date-picker
          v-model="form.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="会员账户：">
        <el-input v-model="form.userName" style="width: 100px;"/>
      </el-form-item>
      <el-form-item label="所属上级：">
        <el-input v-model="form.parentName" style="width: 100px;"/>
        <!--<el-select v-model="form.parentId" >-->
          <!--<el-option v-for="item in agencyList"-->
                     <!--:key="item.id"-->
                     <!--:label="item.userName"-->
                     <!--:value="item.id">-->
          <!--</el-option>-->
        <!--</el-select>-->
      </el-form-item>
      <el-form-item label="已关闭转账的平台：">
        <el-select v-model="form.platform" multiple collapse-tags>
          <el-option v-for="item in consts.PLATFORMS_CONFIG"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" v-waves icon="el-icon-search" @click="()=>submitFilterForm(filters)">搜索</el-button>
      <el-row>
        <el-button type="warning" v-waves icon="el-icon-circle-plus" v-if="roleCheck('add-agency')"
                   @click="openDialog({dialogName: 'agencyDialog' })">设置虚拟代理账户
        </el-button>
        <el-button type="warning" v-waves icon="el-icon-circle-plus" v-if="roleCheck('add-member')"
                   @click="openDialog({dialogName: 'memberDialog',props: {editType:'add'} })">添加虚拟会员账户
        </el-button>
      </el-row>
    </el-form>

    <el-table :data="tableData.list" v-loading="loading" element-loading-text="给我一点时间" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column label="会员账户" align="center" prop="username">
      </el-table-column>
      <el-table-column label="所属上级" align="center" prop="parentName">
      </el-table-column>
      <el-table-column label="关闭的转账平台" align="center" prop="platfromName">
      </el-table-column>
      <el-table-column label="备注" align="center" prop="fakeRemark">
      </el-table-column>
      <el-table-column label="添加时间" align="center" prop="virtualCreateTime">
        <template slot-scope="{row}">
          {{row.fakeCreateTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="添加人" align="center" prop="fakeCreator"></el-table-column>
      <el-table-column label="最后操作时间" align="center" prop="lastUpdateTime">
        <template slot-scope="{row}">
          {{row.fakeLastModifyTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="fakeLastModifier"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button v-if="roleCheck('edit')"
                     type="text"
                     @click="openDialog({dialogName: 'memberDialog', props:row })">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <virtual-agency-dialog
      v-if="dialogName === 'agencyDialog'"
      v-model="dialogVisible"
      :row-data="dialogProps"
      @submit="confirmInfo"/>
    <virtual-member-dialog
      v-if="dialogName === 'memberDialog'"
      v-model="dialogVisible"
      :row-data="dialogProps"
      @submit="submitMemberInfo" @confirm="confirmInfo"/>
    <confirm-dialog
      v-if="dialogName === 'confirmDialog'"
      v-model="dialogVisible"
      :row-data="dialogProps"
      @submit="submitInfo"/>

  </div>
</template>
<script>
  import {form, grid, dialog} from '@/build';

  import {
    virtualAgencyAddApi,
    virtualAgencyQueryApi,
    virtualMemberAddApi,
    virtualMemberQueryApi as listApi
  } from '@/services/api/virtual';
  import VirtualAgencyDialog from './virtualAgencyDialog';
  import VirtualMemberDialog from './virtualMemberDialog';
  import ConfirmDialog from './confirmDialog'


  export default {

    name: 'virtual-account',

    mixins: [form, grid, dialog],

    components: {
      VirtualAgencyDialog,
      VirtualMemberDialog,
      ConfirmDialog,
    },
    data() {
      // 本周 即 当前周 周一至今
      const weekTime = [moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      return {
        form: {
          time: weekTime,
          userName: undefined,
          parentId: undefined,
          platform: undefined,
          parentName: undefined,
        },
        filters: {
          startTime: weekTime[0],
          endTime: weekTime[1],
          userName: undefined,
          parentId: undefined,
          parentName: undefined,
          platform: undefined,
          page: 1,
          size: 20
        },
        tableData: {
          list: [],
          total: 0
        },
        platformList: [],
        agencyList: [],
        userInfo: {},//设置虚拟账户的数据
      }
    },

    methods: {
      submitFilterForm() {
        const {time, username, ip, department,parentName} = this.form;
        let startTime = undefined, endTime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startTime = time[0];
          endTime = time[1];
        }
        this.filters = {...this.filters, ...this.form, startTime, endTime, username, ip, department,parentName}
        this.doGet({action:'getGrid'});
      },
      confirmInfo(params) {
        this.openDialog({dialogName: 'confirmDialog', props: params})
      },
      submitInfo(params) {
        this.userInfo = params;
        if (params.userType == 'agency') {
          this.submitAgencyInfo(params);
        } else if (params.userType == 'member') {
          this.submitMemberInfo(params);
        }
      },
      submitAgencyInfo(params) {
        this.userInfo = params;
        this.doSave({action: 'saveAgency'})
      },
      submitMemberInfo(params) {
        this.userInfo = params;
        this.doSave({action: 'saveMember'})
      },
    },

    mounted() {
      this.bindGet(virtualAgencyQueryApi, 'agencyList');
      this.bindGet(listApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        beforeSend: data => {
          return {
            startTime: data.startTime,
            endTime: data.endTime,
            userName: data.userName,
            platform: (data.platform||[]).join(','),
            parentId: data.parentId,
            parentName: data.parentName,
            page: data.page,
            size: data.size,
          }
        },
        format: data=>{

          let list = [];
          _.each(data.list,item=>{
            let platformName = [];
            let platform = item.unsupportPlatform;
            if(platform.length>0){
              platform = platform.substring(1,platform.length-1)
            }
            let platformList = platform.split('/');
            item.unsupportPlatform = platformList.join(',')
            _.each(platformList,item=>{
              if(item.length>0){
                platformName.push( _.toConverter(item,'PLATFORMS_CONFIG'))
              }

            })
            item.platfromName = platformName.join(',');
            // list.push({
            //   ...item,
            //   platformName: platformName,
            // });
          })
          return data;
        }
      });
      this.getAll();
      this.bindSave(virtualAgencyAddApi, 'saveAgency', 'userInfo', {
        beforeSend: data => {
          return {
            proxyName: data.proxyName,
          }
        },
        successMessage: '设置虚拟代理账户成功',
        afterSuccess: () => {
          this.getAll();
        }
      });
      this.bindSave(virtualMemberAddApi, 'saveMember', 'userInfo', {
        beforeSend: data => {
          return {
            userName: data.userName,
            proxyId: data.proxyId,
            platform: (data.platform||[]).join(','),
            remark: data.remark,
          }
        },
        successMessage: '设置虚拟会员账户成功',
        afterSuccess: () => {
          this.getAll();
        }
      });
    }
  }
</script>
